<template>
  <a-select allowClear v-model="model" class="w-full" :disabled="disabled">
    <a-option @click="select(item)" :value="item.groupsId" :label="item.name" v-for="item in list">
    </a-option>
  </a-select>
</template>

<script setup lang="ts">
import { queryTheme } from "@/api/service/theme/theme";
import { QueryTheme } from "@/api/service/theme/types";
import { ENUM_DATA_SCOPE } from "@/enum/system.enum";

const model = defineModel<string>();

const emit = defineEmits(["change"]);
const list = ref<QueryTheme[]>([]);

const props = withDefaults(
  defineProps<{
    disabled?: boolean;
    scope?: ENUM_DATA_SCOPE;
  }>(),
  {
    scope: ENUM_DATA_SCOPE.THIS_SHOP
  }
);

onMounted(() => {
  fetchLCDThemeCategory();
});

const fetchLCDThemeCategory = async (update = false) => {
  const data = await queryTheme({
    pageNum: 1,
    pageSize: 20,
    scope: props.scope
  });

  if (update) {
    list.value = [];
  }
  if (list.value.length === 0) {
    list.value = data.data;
  }
};
const select = (item: QueryTheme) => {
  model.value = item.groupsId;
  emit("change", item);
};

defineExpose({
  fetchLCDThemeCategory
});
</script>

<style lang="scss" scoped></style>
